<template>
  <div class="container">
    <div class="filter-bar">
      <el-form ref="queryFormRef" :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item prop="keyword">
          <el-input v-model="queryForm.keyword" class="filter-item" clearable placeholder="名称/条码/自编码" size="small"/>
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="checkCategoryList" size="small" @change="handleCheckboxChange">
            <el-checkbox-button v-for="item in categoryList" :key="item" :label="item">{{ item }}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" :height="contentHeight - 220" stripe style="width: 100%;">
      <el-table-column :index="showIndex" align="center" fixed label="序号" type="index"/>
      <el-table-column align="left" label="商品名称" prop="commodityName" show-overflow-tooltip sortable></el-table-column>
      <el-table-column align="center" label="图片" prop="picUrls">
        <template slot-scope="scope">
          <el-image :preview-src-list="scope.row.picUrls ? scope.row.picUrls.split(',') : []"
                    :src="scope.row.picUrls ? scope.row.picUrls.split(',')[0] : ''" fit="fill"
                    style="width: 80px;height: 80px">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="left" label="条码 | 自编码">
        <template slot-scope="scope">
          <div>{{ scope.row.barcode ? '条码: ' + scope.row.barcode : '' }}</div>
          <div>{{ scope.row.customCode ? '自编码: ' + scope.row.customCode : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="当前库存" prop="quantity" sortable></el-table-column>
      <el-table-column align="center" label="单位" prop="unit"></el-table-column>
      <el-table-column align="center" label="售价" prop="salePrice" sortable></el-table-column>
      <el-table-column align="center" label="种类" prop="category" sortable></el-table-column>
      <el-table-column align="center" label="规格" prop="spec"></el-table-column>
      <el-table-column align="center" label="状态" prop="stockStatusName" sortable></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="stockListAfterFilter.length"
                     layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getStockList} from '@/api/store'

export default {
  name: 'StoreStock',
  data () {
    return {
      currentPage: 1,
      queryForm: {
        keyword: ''
      },
      checkCategoryList: []
    }
  },
  computed: {
    tableData () {
      if (this.currentPage * this.pageSize > this.stockListAfterFilter.length) {
        return this.stockListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.stockListAfterFilter.length)
      } else {
        return this.stockListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    },
    ...mapGetters(['stockList', 'contentHeight', 'stationId', 'pageSize']),
    categoryList () {
      return Array.from(new Set(this.stockList.map(item => item.category)))
    },
    stockListAfterFilter () {
      if (this.checkCategoryList.length > 0) {
        return this.keywordFilter(this.stockList.filter(item => this.checkCategoryList.indexOf(item.category) > -1))
      } else {
        return this.keywordFilter(this.stockList)
      }
    }
  },
  mounted () {
    // 手动获取一次库存列表
    getStockList(this.stationId).then(res => {
      console.log(res)
      this.$store.dispatch('setStockList', res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    showIndex (index) {
      return this.pageSize * (this.currentPage - 1) + index + 1
    },
    handleCheckboxChange (value) {
      console.log('handleCheckboxChange')
      console.log(value)
      this.currentPage = 1
    },
    keywordFilter (dataList) {
      if (this.queryForm.keyword) {
        return dataList.filter(item => item.commodityName.indexOf(this.queryForm.keyword) > -1 || item.barcode.indexOf(this.queryForm.keyword) > -1 || item.customCode.indexOf(this.queryForm.keyword) > -1)
      } else {
        return dataList
      }
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.container {

}

.pager {
  width: 100%;
  text-align: center;
  /* padding: 5px; */
  background: white;
}

.filter-bar {
  width: 100%;
  min-height: 60px;
}
</style>
